<!-- 预约记录 -->
<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f3f3f3' }"
		:up="{ use: true, auto: false, isLock: true, empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 0, fixed: true }"
		@upCallback="upCallback"
	>
		<view class="list">
			<view class="item" :class="{ 'binded-item': (item.state == 3 || item.state == 4) }" v-for="item in vdata.cardList">
				<view class="row">
					<view class="bold fsb">{{ item.name }}</view>
					<view class="state fss">{{ (item.state == 3 || item.state == 4) ? '未绑定' : '已绑定' }}</view>
				</view>
				<view class="row bold fsb">
					预约项目： {{ item.project }}
				</view>
				<view class="row fss time">
					预约时间：{{ item.appointTime }}
				</view>
			</view>
		</view>
	</gzPageWrapper>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $getAciticityAwardItems } from '@/http/apiManager.js'
	
	// 页面容器实例
	const gzPageWrapperRef = ref()
	
	// 数据源
	const vdata = reactive({
		cardList: [],	// 绑卡记录
		params: {},	// 
	})
	
	onLoad(({ params }) => {
		Object.assign(vdata.params,JSON.parse(params),{ templateNo: 'ACTE017' })
	})
	
	onMounted(() => {
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
	})
	
	/**
	 * 请求列表数据
	 */
	const upCallback = (mescroll) => {
		$getAciticityAwardItems(vdata.params).then(({ bizData }) => {
			vdata.cardList = bizData.map(item => ({...item,...JSON.parse(item.extraJson)}))
			mescroll.endSuccess(0)
		}).catch(() => {
			mescroll.endErr()
		})
	}
</script>

<style lang="less" scoped>
	.row{
		display: flex;
		justify-content: space-between;
	}
	.bold{
		font-weight: bold;
	}
	.fsb{
		font-size: 36rpx;
	}
	.fss{
		font-size: 24rpx;
	}
	.list{
		padding: 24rpx;
		.item{
			padding-top: 24rpx;
			border: 4rpx solid #d5dfc1;
			border-radius: 15rpx;
			background: #fff;
			box-shadow: inset 0 1.5em 0.5em -1em #f4f9ee;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			
			.row{
				padding-left: 24rpx;
			}
			
			.state{
				display: flex;
				align-items: center;
				gap: 6rpx;
				padding: 0 20rpx;
				border-radius: 8rpx 0 0 8rpx;
				background: #e3f4cc;
				color: #649305;
				&::before{
					content: '';
					display: block;
					width: 16rpx;
					height: 16rpx;
					background-color: #649305;
					border-radius: 8rpx;
				}
			}
			
			.time{
				padding: 18rpx 24rpx;
				background-color: #f3f3f3;
				border-radius: 15rpx;
				color: #b5b5b5;
			}
		}
		.binded-item{
			border: 4rpx solid #eacfb7;
			box-shadow: inset 0 1.5em 0.5em -1em #fdf4ed;
			.state{
				background: #fff1e9;
				color: #e37318;
				&::before{
					background-color: #e37318;
				}
			}
		}
	}
</style>